<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="logo">
        <h1>Login</h1>
      </div>
      <!-- 登录表单区域 -->
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        auto-complete="on"
      >
        <!-- 用户名->手机号 -->
        <el-form-item prop="mobile">
          <el-input
            ref="mobile"
            v-model="loginForm.mobile"
            name="mobile"
            tabindex="1"
            placeholder="手机号"
            prefix-icon="el-icon-user"
            class="login-input"
            type="text"
          />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            name="password"
            tabindex="2"
            auto-complete="on"
            class="login-input"
            placeholder="密码"
            prefix-icon="el-icon-lock"
            show-password
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <!-- 按钮区域 -->
        <el-button
          :loading="loading"
          type="primary"
          login-button
          @click.native.prevent="handleLogin"
        >
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { validMobile } from "@/utils/validate";
import { mapActions } from "vuex";

export default {
  name: "Login",
  data() {
    // const validMobile = (rule, value, callback) => {
    //   if (!validMobile(value)) {
    //     callback(new Error("请输入正常的手机号"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      loginForm: {
        mobile: 13800000002,
        password: "123456",
      },
      loginRules: {
        // mobile: [
        //   { required: true, trigger: "blur", validator: validMobile },
        //   {
        //     min: 11,
        //     max: 11,
        //     message: "长度在 11个字符",
        //     trigger: "blur",
        //   },
        // ],
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern:
              /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/,
            message: "输入的手机号码格式不正确",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    ...mapActions("user", ["loginActions"]),
    // 登录
    handleLogin() {
      this.$refs.loginForm.validate(async(valid) => {
        // 登录校验
        if (valid) {
          this.loading = true
          try {
            const res = await this.loginActions(this.loginForm)
            this.$message.success(res.message)
            this.$router.replace(this.redirect || '/')
          } catch (err) {
            console.error(err)
          }
          this.loading = false
        } else {
          return false // 未通过
        }
      })
      // 知识点1:
      // this.loginForm是上面定义和v-model绑定的对象以及对象key属性
      // 这里直接把相同的参数名对象直接发给后台 (建议: 前端定义变量可以直接跟接口文档要求的参数名一致)
      // 知识点2: await只能拿到成功的结果, 如果Promise对象内用reject()返回, 这里就中断不往下执行
      // 知识点3: 当Promise对象这里, 没有自己捕获到错误(try+catch, 或者.catch())然后处理的话, 浏览器就会把"抛出的这个错误"打印到控制台里, "终止代码继续往下"
      // 知识点4: 捕获Promise的错误 try+catch
      // 知识点5: 打印相关
      // 小点: .log(普通打印) .error(红色打印) .dir(打印对象详细信息-可以展开看里面key+value)
    },
  },
};
</script>

<style lang="scss" scoped>
$bg: #2c3e50;
$dark_gray: #889aa4;
$light_gray: #eee;

.login_container {
  background-color: #2c3e50;
  /* height: 100%; */
  height: 100vh;
}

.login_box {
  /* 超出部分隐藏 */
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 300px;
  height: 450px;
  background-color: #34495e;
  border-radius: 10px;
  box-shadow: 10px 10px 20px rgba(33, 44, 55, 0.3);
  margin: 0 auto;
  // position: relative;
  top: 20%;
  .logo {
    h1 {
      margin: 70px 0 40px 0;
      color: white;
      text-align: center;
      font-size: 45px;
      font-weight: 450;
    }
  }

  .login_from {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 230px;
    font-weight: 450;
  }
}

.login-input {
  width: 200px;
  height: 40px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #eee;
  font-size: 16px;
  outline: none;
}

::v-deep .login-input .el-input__inner {
  width: 100%;
  background-color: #34495e;
  border-color: #34495e;
  border-bottom: 2px solid #eee;
  color: white;
}

button {
  width: 180px;
  height: 36px;
  border: 1px solid #eee;
  border-radius: 18px;
  background-color: transparent;
  font-size: 14px;
  cursor: pointer;
  color: #eee;
  display: block;
  margin: 50px auto;
}
</style>
